import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Select, Row, Table, DatePicker, Avatar } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getCameraList, getFaceUserList } from '@/services/userCenter/userList/face'

const { RangePicker } = DatePicker

const { Option } = Select

// 表头
const columns = [
  {
    title: '抓拍设备名称',
    dataIndex: 'cameraName',
    key: 'cameraName',
    align: 'center'
  },
  {
    title: '抓拍人脸',
    dataIndex: 'facesImage',
    key: 'facesImage',
    align: 'center',
    render: facesImage => <Avatar shape="square" size="large" src={facesImage} />
  },
  {
    title: '到访画面',
    dataIndex: 'facesFrame',
    key: 'facesFrame',
    align: 'center',
    render: facesFrame => <Avatar shape="square" size="large" src={facesFrame} />
  },
  {
    title: '到访时间',
    dataIndex: 'timestamp',
    key: 'timestamp',
    align: 'center'
  }
]

const Face = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [cameraList, setCameraList] = useState([])
  const [total, setTotal] = useState(1)
  const [pageNumber, setPageNumber] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [record, setRecord] = useState({})
  const [faceUserList, setFaceUserList] = useState([])
  const [starttime, setStarttime] = useState('')
  const [endtime, setEndtime] = useState('')

  const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      setRecord(selectedRows)
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      console.log(record)
    },
  }

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
    await getCameraLists()
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields(async (err, values) => {
      console.log('Received values of form: ', values)
      let macAddressList = ''
      values.camera.forEach(item => {
        macAddressList += item + ','
      })
      let params = {
        pageNumber,
        pageSize,
        starttime,
        endtime,
        macAddressList
      }
      await getFaceUserLists(params)
    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Row gutter={24}>
        <Col span={12}>
          <Form.Item label="摄像头" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('camera', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
                mode="multiple"
              >
                { cameraList && cameraList.map(r => <Option key={r.id} value={r.macAddress}>{r.macName}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="访问时间" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('date', {})
              (<RangePicker onChange={selectData} />)}
          </Form.Item>
        </Col>
      </Row>
    )
  }
  // 按钮处理
  const handleBtn = type => {

  }
  // 获取摄像头列表
  const getCameraLists = async (params) => {
    let res = await getCameraList(params)
    if (res.code === '0') {
      setCameraList(res.data)
    }
  }
  // 获取人脸会员列表
  const getFaceUserLists = async (params) => {
    let res = await getFaceUserList(params)
    if (res.code === '0' && res.data.code === '1000') {
      console.log(res.data.visitorList);

      setFaceUserList(res.data.visitorList)
      setTotal(res.data.total)
    }
  }

  const pagination = {
    total: parseInt(total),
    onChange(page) {
      form.validateFields(async (err, values) => {
        console.log('Received values of form: ', values)
        let macAddressList = ''
        values.camera.forEach(item => {
          macAddressList += item + ','
        })
        let params = {
          pageNumber: page,
          pageSize,
          starttime,
          endtime,
          macAddressList
        }
        await getFaceUserLists(params)
      })
    }
  }
  // 选择时间
  const selectData = (date, dateString) => {
    setStarttime(dateString[0])
    setEndtime(dateString[1])
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table
        columns={columns}
        dataSource={faceUserList}
        rowKey={record => record.id}
        pagination={pagination}
        rowSelection={rowSelection}
      />
   </PageHeaderWrapper>
  )
}

export default Form.create()(Face)
